<template>
  <div class="wrap-container sn-container">
    <div class="sn-content">
      <div class="sn-title">平台测评</div>
      <div class="select">
        <el-select v-model="selectItem" placeholder="请选择任务">
          <el-option
            v-for="item in periodList"
            :key="item"
            :label="item"
            :value="item"
          >
          </el-option>
        </el-select>
      </div>
      <div class="sn-body">
        <div class="wrap-container">
          <div class="chartsdom" id="chart_radar"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "platformEval",
  props: {
    allData: {
      type: Array,
      default() {
        return [];
      },
    },
    dictData: {
      type: Array,
      default() {
        return [];
      },
    },
    currentStudent: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      option: null,
      timer: null,
      xData: [],
      now: +new Date(2019, 1, 1),
      value: Math.random() * 1000,
      oneDay: 24 * 3600 * 1000,
      chartData: [],
      subjectNameList: [],
      periodList: [],
      selectItem: "",
      num: 0,
    };
  },
  watch: {
    allData: {
      handler() {
        this.getData();
      },
      deep: true,
    },
    selectItem: {
      handler(val) {
        if (val) {
          this.getEchart(val);
        }
      },
      deep: true,
    },
    // currentStudent: {
    //   handler(val) {
    //     val && this.getData();
    //   },
    //   deep: false,
    // },
  },
  mounted() {},
  methods: {
    getData() {
      const list = this.allData.filter((el) => el.scoreType === "3" && 
          el.stuName === this.currentStudent.stuName);
      if (list.length > 0) {
        this.chartData = list.map((el) => {
          const obj = { data: [] };
          const list = el.subjectName.map((v, key) => {
            return {
              name: v,
              value: Number(el.score[key]),
            };
          });
          obj.period = el.period;
          obj.data = list;
          return obj;
        });
        this.subjectNameList = list[0].subjectName;
        const temp = [];
        list
          .map((el) => el.period)
          .forEach((el) => {
            if (!temp.includes(el)) {
              temp.push(el);
            }
          });
        this.periodList = temp.sort((a, b)=> a.localeCompare(b, 'zh')); //a~z 排序  
        this.selectItem = this.periodList[0]; 
      } else {
        this.chartData = [];
        this.subjectNameList = [];
        this.periodList = [];
        clearInterval(this.timer);
        this.getEchart("");
      }
    },
    switchItem() {
      this.num += 1;
      if (this.num > this.chartData.length - 1) {
        this.num = 0;
      }
      const item = this.chartData[this.num];
      this.selectItem = item.period;
      this.getEchart(item.period);
    },
    getEchart(period) {
      // eslint-disable-next-line no-undef
      let myChart = echarts.init(document.getElementById("chart_radar"));
      const list = [];
      const data = this.chartData.filter((el) => el.period === period);
      if (data.length) {
        for (let item of data) {
          const series = {
            value: item.data.map((el) => el.value),
            name: item.period,
            itemStyle: {
              normal: {
                // eslint-disable-next-line no-undef
                color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                  {
                    offset: 0,
                    color: "#9c6b44",
                  },
                  {
                    offset: 1,
                    color: "#2a59ac",
                  },
                ]),
                lineStyle: {
                  color: "#fff",
                },
              },
            },
          };
          list.push(series);
        }
      }
      this.option = {
        tooltip: {
          trigger: "axis",
        },
        radar: [
          {
            indicator: this.subjectNameList.map((el) => ({
              text: el,
              max: 100,
            })),
            radius: "75%",
            center: ["50%", "50%"],
            name: {
              textStyle: {
                color: "#1883ff",
              },
            },
            axisName: {
              fontSize: 29,
              lineHeight: 29,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            axisLine: {
              show: true,
              symbol: "arrow",
              symbolSize: [5, 7.5],
              lineStyle: {
                color: "#1883ff",
                type: "dashed",
              },
            },
            splitArea: {
              show: false,
            },
            splitLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            type: "radar",
            areaStyle: {},
            itemStyle: {
              normal: {
                areaStyle: {
                  type: "default",
                },
                label: {
                  show: true,
                  formatter: function (params) {
                    return params.value + "分";
                  },
                  textStyle: {
                    color: "#fff",
                  },
                },
              },
            },
            lineStyle: {
              opacity: 0,
            },
            data: list,
          },
        ],
      };
      myChart.setOption(this.option, true);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
};
</script>

<style lang="scss" scoped>
.sn-container {
  width: 500px;
  height: 260px;
  // height: 400px;
  left: 1370px;
  top: 350px;
  .chartsdom {
    width: 100%;
    height: 100%;
  }
}

.select {
  position: absolute;
  right: 0;
}
</style>
